HTML Templates

Description

These templates can be used in the List control, the ViewBox control and in the Free-form HTML Container control.

Inserting a Template in a List Control

HTML Templates can only be used in a Freeform List layout. To insert one of the HTML Templates in a List control,

  1. In the List Builder on the List Layout tab, place the mouse cursor in the layout editor where you would like to insert the template.

  2. Click the Pre-defined Templates link on the bottom left of the layout editor.

  3. Click the More Templates button at the bottom of the List Template Picker window.

  4. Select the desired HTML layout. Then click OK.

  5. Click Cancel to exit without selecting a template.

Inserting a Template in a ViewBox Control

HTML Templates can only be inserted using the Freeform editor in the ViewBox.

  1. In the ViewBox Builder on the ViewBox Layout tab, select the Freeform Layout radio button.

  2. Place the mouse cursor in the layout editor where you would like to insert the template.

  3. Click the Insert... button and select Pre-defined Layout Template from the menu.

  4. Click the More Templates button at the bottom of the List Template Picker window.

  5. Select the desired HTML layout. Then click OK.

  6. Click Cancel to exit without selecting a template.

Inserting a Template in a Free-form Layout Container

HTML Templates can be used in the Free-form layout for the Free-form Layout Container.

  1. Click the smart field button for the Free-form layout property to edit the layout.

  2. Place the mouse cursor in the layout editor where you would like to insert the template.

  3. Click the Insert HTML Template link below the layout editor.

  4. Select the desired HTML layout. Then click OK.

  5. Click Cancel to exit without selecting a template.

You can insert UX controls that are hidden (the control's Hide property has been checked) into a Free-form Layout Container's layout.

Card Templates

images/template1.png
Card - Default
images/template2.png
Card - Image Fill
images/template3.png
Card - Large
images/template4.png
Card - Image Bubble
images/template5.png
Card - Image Bubble Left
images/template6.png
Card - Image Bubble Right
images/template7.png
Card - Image Bubble Wide

Videos

Using HTML Templates in the List, ViewBox and Free-form HTML Layout Control

The UX builder comes with several attractively designed HTML templates than can be used when designing List controls, ViewBox controls and Free-form HTML Layout controls. In this video, we show how to use the pre-defined HTML templates to create some very attractive UX components. The video shows how to insert an HTML Template into a List control, ViewBox control, and Freeform HTML Container Control.

Download Component

2019-06-30